<template>
  <div class="delete-data">
    <Dropdown placement="bottom-start" @on-click="dropdown">
      <Button class="arrow-down">
        <Icon size="14" type="md-cloud-upload " class="mr-5" />
        <span>导入</span>
        <Icon size="18" type="md-arrow-dropdown" />
      </Button>
      <DropdownMenu slot="list">
        <DropdownItem name="insert">导入数据</DropdownItem>
        <DropdownItem name="history">查看导入历史</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <ButtonGroup>
      <Button @click="handelerBtn(1)" class="cb-icon" icon="md-exit"
        >导出</Button
      >
      <Button @click="handelerBtn(2)" class="cb-icon" icon="ios-trash"
        >删除</Button
      >
    </ButtonGroup>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Inject } from "vue-property-decorator";
import { Tools } from "@/model/tools.ts";

@Component
export default class DeleteDataBtn extends Tools {
  // 依赖注入 provide、inject
  @Inject()
  private getType!: string;
  /**
   * 使用$on(eventName)监听事件---点击@click
   * 使用$emit(eventName)触发事件---delete-data-btn中引用@on-click
   */
  private handelerBtn(type) {
    this.$emit("on-click", type);
  }
  private dropdown(name) {
    if (name === "history") {
      this.$router.push({
        path: `StaffInsertHistory/${this.getType}`
      });
    }
    if (name === "insert") {
      this.$emit("update:insert", true); //如何调用ImportModal组件中的时v-modal="show"呢?
    }
  }
}
</script>
<style lang="stylus" scoped>
.delete-data {
  >>>.arrow-down.ivu-btn.ivu-btn-default {
    border-bottom-right-radius: 0
    border-top-right-radius: 0
    padding: 5px 10px 6px
  }
}
</style>
